<!-- 多选题 -->

<template>
  <FormSlot :bind="`no_${obj.no}`" tip="请选择" noLabel :check="check" :required="obj.required === 1">
    <div v-for="item in obj.optionList" :key="item.key" class="flex">
      <ShowSlot flex0>
        <el-checkbox v-bind="getProps(item)" @change="toChange(item)" />
      </ShowSlot>

      <ShowSlot flex1>
        <ShowImage v-if="!CORE.isEmpty(item.image)" :one="item" noLabel />
        <ShowTextMulti v-if="item.content" :one="item" bind="content" />
      </ShowSlot>
    </div>
  </FormSlot>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadio from '../MyRadio'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadio, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyCheckbox',

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 校验
     */
    check(value) {
      const arr = value ? value.split(' ') : []
      const { min, max } = this.obj

      if (min && arr.length < min) return `最少 ${min}项`
      if (max && max.length > max) return `最多 ${max}项`
      return ''
    },

    /**
     * 获取属性
     */
    getProps({ label }) {
      const { obj: { no }, form, disabled } = this
      const value = form[`no_${no}`].includes(label)
      return { value, label, disabled }
    },

    /**
     * 点击切换
     */
    toChange(item) {
      if (!item) return

      const { obj: { no }, form } = this
      const { value, label } = this.getProps(item)

      let arr = form[`no_${no}`] ? form[`no_${no}`].split(' ') : []

      if (value) arr = arr.filter(item => item !== label)
      else arr.push(label)

      arr.sort()

      form[`no_${no}`] = arr.join(' ')
    },
  },
})
</script>
